<!--
 * @Author: cwq
 * @Date: 2020-06-09
 * @LastEditors: wjk
 * @LastEditTime: 2020-10-27 11:19:09
 * @description: file content
 -->
<template>
  <base-page-view class-name="page-container certification-page">
    <!-- <view v-if="isStatus" class="head_tips">温馨提示：审核未通过，请重新提交</view> -->
    <view class="ali-certification-content">
      <uni-forms :value="formData" ref="form" label-width="100" validate-trigger="bind" err-show-type="undertext">
        <uni-forms-item name="alipayName" required label="真实姓名">
          <uni-easyinput type="text" :inputBorder="false" disabled v-model="formData.alipayName" placeholder="请输入">
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="IDCard" required label="证件号码">
          <uni-easyinput type="text" :inputBorder="false" disabled v-model="formData.IDCard" placeholder="请输入"></uni-easyinput>
        </uni-forms-item>
        <view class="zfb_account">
          <uni-forms-item name="alipayAccount" required label="支付宝账号">
            <uni-easyinput type="text" :inputBorder="false" v-model="formData.alipayAccount" placeholder="请输入支付宝账号（邮箱,手机号）">
            </uni-easyinput>
          </uni-forms-item>
        </view>
        <view class="controls">
          <view class="note">
            <view class="title">温馨提示</view>
            <view class="content">支付宝账号和姓名需保持一致，否则提现会失败</view>
          </view>
          <b-button :val="alipayBindFlag=='true'?'立即更换':'立即绑定'" @click="saveReal"></b-button>
        </view>
      </uni-forms>
      <!-- <view class="card" :class="{'b_border':real.alipayAccount?true:false}">
        <span class="text ">支付宝账号</span>
        <input v-model="real.alipayAccount" placeholder="请输入支付宝账号(邮箱, 手机号)" class="content_input" placeholder-class="placeholderClass" @input="inputFocus($event, 3)" @focus="inputFocus($event, 3)" @blur="inputBlur(3)" />
        <image v-if="delete1" src="/static/images/commission/ic_close_search.png" class="delete" @click="real.bank_no=''" />
      </view>
      <view class="card" :class="{'b_border':real.alipayName?true:false}">
        <span class="text">支付宝实名</span>
        <input v-model="real.alipayName" placeholder="请输入支付宝的真实姓名" :class="{'updateRealname':updateRealname}" class="content_input" placeholder-class="placeholderClass" :disabled="updateRealname" @input="inputFocus($event, 1)" @focus="inputFocus($event, 1)" @blur="inputBlur(1)" />
        <image v-if="delete2" src="/static/images/commission/ic_close_search.png" class="delete" @click="real.real_name = ''" />
      </view> -->
    </view>
  </base-page-view>
</template>

<script>
  import './index.scss'
  // import { h5NavigateTo } from '@/utils/navigateTo'
  export default {
    data() {
      return {
        formData: {
          alipayName: '',
          IDCard: '',
          alipayAccount: ''
        },
        real: {
          alipayName: '',
          alipayAccount: ''
        },
        // true 提交按钮显示重新提交,false显示提交
        isStatus: false,
        dataName: {
          alipayName: '请输入支付宝的真实姓名',
          alipayAccount: '请输入支付宝账号'
        },
        delete1: false,
        delete2: false,
        updateRealname: false,
        withdrawType: '', //提现方式
        alipayBindFlag: '', //支付宝是否绑定
      }
    },
    onLoad(options) {
      console.log('options', options)
      this.formData.alipayName = options.name && options.name !== 'null' && options.name !== 'undefind' ? options.name : ''
      this.formData.alipayAccount = options.account && options.account !== 'null' && options.account !== 'undefind' ? options.account : ''
      this.formData.IDCard = options.auth_no||''
      this.withdrawType = options.withdrawType //提现方式
      this.alipayBindFlag = options.alipayBindFlag
      if (this.alipayBindFlag == "true") {
        uni.setNavigationBarTitle({
          title: "更换支付宝"
        })
      }
    },
    methods: {
      async saveReal() {
        let canSub = ''
        if (!this.formData.alipayName && this.formData.alipayName !== 0) {
          canSub = 'alipayName'
        } else if (!this.formData.alipayAccount && this.formData.alipayAccount !== 0) {
          canSub = 'alipayAccount'
        }
        console.log(canSub)
        if (canSub) {
          uni.showToast({
            title: this.dataName[canSub],
            icon: 'none',
            duration: 2 * 1000
          })
          return
        } else {
          let updateRes;
          //判断不同支付方式
          if (this.withdrawType == 1) {
            updateRes = await this.$api.commissionApi.getAlipyUpdate({
              alipayAccount: this.formData.alipayAccount,
              alipayName: this.formData.alipayName
            })
          } else if (this.withdrawType == 2) {
            updateRes = await this.$api.commissionApi.bindAlipayWithdraw({
              alipayAccount: this.formData.alipayAccount,
              userId: this.$store.state.userInfo.uid
            })
          }
          console.log(updateRes)
          if (updateRes.code === 0||updateRes.code == "000000") {
            uni.showToast({
              title: updateRes.msg,
              icon: 'none',
              duration: 2 * 1000
            })
            uni.setStorageSync('alipayRolad', true)
            uni.navigateBack()
          } else {
            uni.showToast({
              title: updateRes.msg,
              icon: 'none',
              duration: 2 * 1000
            })
          }
        }
      },
      inputFocus(event, type) {
        if (type === 1) {
          if (event.target.value) {
            this.delete1 = true
          } else {
            this.delete1 = false
          }
        } else if (type === 2) {
          if (event.target.value) {
            this.delete2 = true
          } else {
            this.delete2 = false
          }
        }
      },
      inputBlur(type) {
        setTimeout(() => {
          if (type === 1) {
            this.delete1 = false
          } else if (type === 2) {
            this.delete2 = false
          }
        }, 100)
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.is-disabled {
    background-color: transparent !important;
  }
  .controls {
    background-color: #F5F5F5;

    .note {
      font-size: 22rpx;
      color: #19191F;
      padding: 20rpx 33rpx;
    }
  }
  /deep/.uni-forms-item__box {
    width: 100% !important;
  }
  /deep/.uni-forms-item {
    background-color: white !important;
    padding: 0 33rpx !important;
    display: flex;
    align-items: center;
  
    /deep/ .uni-forms-item__box {
      .uni-forms-item__inner {
        .uni-forms-item__label {
          font-size: 28rpx;
          font-weight: bold;
        }
      }
    }
  }

  .zfb_account {
    padding-top: 20rpx;
    background-color: #F5F5F5;
    .uni-forms-item {
      background-color: white;
    }
    /deep/ .uni-forms-item__inner {
      padding: 20rpx 0;
    }
  }
  .ali-certification-content {
    margin-top: 20rpx;
    padding: 0;
    padding-top: 55rpx;
  }
</style>
